<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
	<title> Reign Of Gunpowder (Preprod) </title>

	<!-- Librarie pour les sockets -->
	<script type="text/javascript" src="socket.io/socket.io.js"></script>
	
	<!-- Librarie Easel.js -->
	<script type="text/javascript" src="src/Utils/Prototype.js"></script>
    <script type="text/javascript" src="src/Utils/Singleton.js"></script>
    <script type="text/javascript" src="easeljs/utils/UID.js"></script>
    <script type="text/javascript" src="easeljs/geom/Matrix2D.js"></script>
    <script type="text/javascript" src="easeljs/display/DisplayObject.js"></script>
    <script type="text/javascript" src="easeljs/display/Container.js"></script>
    <script type="text/javascript" src="easeljs/display/Shadow.js"></script>
    <script type="text/javascript" src="easeljs/display/SpriteSheet.js"></script>
    <script type="text/javascript" src="easeljs/display/Stage.js"></script>
    <script type="text/javascript" src="easeljs/events/MouseEvent.js"></script>
    <script type="text/javascript" src="easeljs/display/Shape.js"></script>
    <script type="text/javascript" src="easeljs/display/Graphics.js"></script>
    <script type="text/javascript" src="easeljs/utils/Ticker.js"></script>
    <script type="text/javascript" src="easeljs/display/Bitmap.js"></script>
    <script type="text/javascript" src="easeljs/display/Text.js"></script>
    <script type="text/javascript" src="easeljs/geom/Rectangle.js"></script>
    <script type="text/javascript" src="easeljs/geom/Point.js"></script>
    <script type="text/javascript" src="easeljs/utils/SpriteSheetUtils.js"></script>
    <script type="text/javascript" src="easeljs/display/BitmapAnimation.js"></script>
	
	<!-- Nos Librairies -->
    <!-- Utils -->
	<script src="src/Utils/XNARectangle.js"></script>
    <!-- BO -->
    <script src="src/BO/Perso.js"></script>
    <script src="src/BO/Bombe.js"></script>
    <script src="src/BO/Map.js"></script>
    <script src="src/BO/Flamme.js"></script>
    <!-- BLL -->
    <script src="src/BLL/LesPersos.js"></script>
    <script src="src/BLL/LesBombes.js"></script>
    <script src="src/BLL/LesFlammes.js"></script>
	
	<script type="text/javascript">
	
		//Déclarations des variables
		var canvas;
        var stage;
        var intMyID;
        var imgBackground;
        var sprBombe = "images/Sprite_bombe.png";
        
        //Instance des classes BLL
        var lesPersos = LesPersos.GetInstance();
        var lesBombes = LesBombes.GetInstance();
        var lesFlammes = LesFlammes.GetInstance();
        
        //Touches
        var KEYCODE_SPACE = 32;		//Touche espace
        var KEYCODE_DOWN = 40;		//Touche bas
        var KEYCODE_UP = 38;		//Touche haut
        var KEYCODE_LEFT = 37;		//Touche gauche
        var KEYCODE_RIGHT = 39;		//Touche droit
        
        //register key functions
        document.onkeydown = handleKeyDown;
        document.onkeyup = handleKeyUp;
	
		//Connection avec le serveur via la socket
		var socket = io.connect();
		
		/******************************************************
		 *	Initialisation
		 ******************************************************/
		
		function init() {
			canvas = document.getElementById('myCanvas');
			stage = new createjs.Stage(canvas);
			//Les images
            sprExplosion1 = "images/Sprite_explosion.png";
			sprExplosion2 = "images/Sprite_explosion2.png";
			sprExplosion3 = "images/Sprite_explosion3.png";
			
			//Configuration du jeu
			createjs.Ticker.setInterval(17);
            createjs.Ticker.addListener(window);
            createjs.Ticker.useRAF = true;
            createjs.Ticker.setFPS(60);
            
            //Récupère données du serveur
            socket.emit('ConnecterClient');
		}
		
		function tick() {
			lesPersos.tick();
			lesBombes.tick();
			lesFlammes.tick();
			stage.update();
		}
		
		function jouer() {
			//Sélectionner l'image du perso avant
			socket.emit('Jouer',"images/perso.png");
		}
		
		/******************************************************
		 *	Fonctions reçues par les sockets 
		 ******************************************************/
		
		//Récupérer l'ID du joueur
		socket.on('RecupererID', function (intID) {
			intMyID = intID;
		});
		
		//Récupérer les joueurs déjà présents 
		socket.on('RecupererJoueurs', function (tabJoueurs){
			for (var i = 0; i <= tabJoueurs.length - 1; i++) {
				new Perso(tabJoueurs[i].image, new createjs.Point(tabJoueurs[i].x,tabJoueurs[i].y),new createjs.Point(tabJoueurs[i].width, tabJoueurs[i].height));
			}
		});
		
		//Récupérer la map
		socket.on('RecupererMap', function (strBackground, tabDecor){
			//On affiche le background
			imgBackground = new createjs.Bitmap(strBackground);
			stage.addChild(imgBackground);
			//On ajoute les différents décors
		});
		
		//Récupérer les nouveaux personnages
		socket.on('RecupererNouveauPerso', function(prsPerso){
			new Perso(prsPerso.image, new createjs.Point(prsPerso.x,prsPerso.y), new createjs.Point(prsPerso.width, prsPerso.height));
		});
		
		//Fonction de déplacement d'un perso
        socket.on('LancerDeplacementPerso', function(intId, intDirection, x , y){
            lesPersos.tabLesPersos[intId].LancerDeplacement(intDirection, x , y);
        });
        
		//On immobilise un perso
		socket.on('ImmobiliserPerso', function(intId, intDirection, x , y){
			lesPersos.tabLesPersos[intId].Immobiliser(intDirection, x, y);
		});
		
		//Un perso pose une bombe
		socket.on('PoserBombePerso', function(intId, objBombe){
			lesPersos.tabLesPersos[intId].DeposerBombe(intId,objBombe);
		});
		
		//Une bombe explose
		socket.on('ExploserBombePerso', function(intId, idBombe){
			lesBombes.DeleteAtIndex(idBombe, intId);
		});
		
		//Un perso meurt
		socket.on('TuerPerso', function(intId, idPerso){
			lesPersos.DeleteAtIndex(idPerso, intId);
		});
		
		/******************************************************
		 *	Gestion du clavier
		 ******************************************************/
		
		//Evènement sur les touches du clavier
		//Bouton appuyé
       function handleKeyDown(e) {
            //cross browser issues exist
            if (!e) { var e = window.event; }
            //Annule l'évènement en cours
            e.preventDefault();
            switch (e.keyCode) {
                case KEYCODE_LEFT:
                	if (lesPersos.tabLesPersos[intMyID].intDirection != 4 || lesPersos.tabLesPersos[intMyID].bolEnDeplacement == false)
					{
						lesPersos.tabLesPersos[intMyID].deplacement ++;
						socket.emit('LancerDeplacement',intMyID, 4, lesPersos.tabLesPersos[intMyID].x, lesPersos.tabLesPersos[intMyID].y);
					}
					break;
                case KEYCODE_RIGHT:
                	if (lesPersos.tabLesPersos[intMyID].intDirection != 2 || lesPersos.tabLesPersos[intMyID].bolEnDeplacement == false)
					{ 
						lesPersos.tabLesPersos[intMyID].deplacement ++;
						socket.emit('LancerDeplacement',intMyID, 2, lesPersos.tabLesPersos[intMyID].x, lesPersos.tabLesPersos[intMyID].y); 
					}
					break;
                case KEYCODE_UP: 
                	if (lesPersos.tabLesPersos[intMyID].intDirection != 1 || lesPersos.tabLesPersos[intMyID].bolEnDeplacement == false)
					{ 	
						lesPersos.tabLesPersos[intMyID].deplacement ++; 
						socket.emit('LancerDeplacement',intMyID, 1, lesPersos.tabLesPersos[intMyID].x, lesPersos.tabLesPersos[intMyID].y);
					}
					break;
                case KEYCODE_DOWN: 
                	if (lesPersos.tabLesPersos[intMyID].intDirection != 3 || lesPersos.tabLesPersos[intMyID].bolEnDeplacement == false)
					{
						lesPersos.tabLesPersos[intMyID].deplacement ++;
						socket.emit('LancerDeplacement',intMyID, 3, lesPersos.tabLesPersos[intMyID].x, lesPersos.tabLesPersos[intMyID].y);
					} 
                	break;
                case KEYCODE_SPACE: lesPersos.tabLesPersos[intMyID].PoserBombe(); break;
            }
        }

		//Bouton relevé
        function handleKeyUp(e) {
        	if (!e) { var e= window.event; }
        	
        	e.preventDefault();
        	switch (e.keyCode){
        		case KEYCODE_DOWN: 
        		case KEYCODE_LEFT: 
        		case KEYCODE_RIGHT: 
        		case KEYCODE_UP:
        			lesPersos.tabLesPersos[intMyID].deplacement --; break;
        	}
			//On vérifie si le perso doit se stabiliser
			if (lesPersos.tabLesPersos[intMyID].deplacement <= 0)
			{
				socket.emit('ImmobiliserPerso',intMyID, lesPersos.tabLesPersos[intMyID].intDirection, lesPersos.tabLesPersos[intMyID].x, lesPersos.tabLesPersos[intMyID].y);
			}			
        }	

	</script>
</head>
<body onload="init()">

    <canvas id="myCanvas" width="1000" height="500">ROG</canvas>
    <button onClick='jouer();' >Jouer</button></li>
</body>
</html>